<template>
  <div class="tpp">
    <div class="top">
        <div class="top-l">
            <img src="https://gw.alicdn.com/tfs/TB1mKkzl9zqK1RjSZFpXXakSXXa-50-50.svg" alt="">
            <div>上海 <van-icon name="arrow-down" /></div>
        </div>
        <div class="top-r">
            <div>正在热映</div>
            <div>即将上映</div>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="lbt">
        <van-swipe :autoplay="3000">
  <van-swipe-item v-for="(image, index) in images" :key="index">
    <img v-lazy="image" />
  </van-swipe-item>
</van-swipe>
    </div>
    <div class="list">
        <div v-for="(v,index) in arr" :key="index">
            <img :src="v.img" alt="">
            <div>{{ v.text }}</div>
        </div>
    </div>
    <div class="xq" v-for="(v,index) in tv" :key="index">
        <img :src="v.img" alt="">
        <div class="zhong">
            <div class="name">{{ v.name }}</div>
            <div>淘票票评分<span>9.6</span> | 113.5万 人评</div>
            <div>{{ v.zuozhe }}</div>
            <div class="yanyuan">{{ v.yanyuan }}</div>
        </div>
        <div class="last">购票</div>
    </div>
    <div>
        <van-tabbar v-model="active">
  <van-tabbar-item >
    <span>首页</span>
    <template #icon="props">
      <img :src="props.active ? icon.active : icon.inactive" />
    </template>
  </van-tabbar-item>
  <van-tabbar-item icon="tv-o">影院</van-tabbar-item>
  <van-tabbar-item icon="user-circle-o">我的</van-tabbar-item>
</van-tabbar>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);
export default {
    mounted(){
    this.$http({
            url: 'http://localhost:3000/tv',
            method:"get"
         }).then(res => {
            
              this.tv = res.data
             console.log(res.data);

        })
   },
    data() {
    return {
        active: 0,
      icon: {
        active: '//gw.alicdn.com/imgextra/i4/O1CN01N64HFT1fr4MYeK96r_!!6000000004059-2-tps-81-81.png',
        inactive: '//gw.alicdn.com/imgextra/i1/O1CN011M6yE31udzHg747SM_!!6000000006061-2-tps-81-81.png',
      },
      images: [
        '//img.alicdn.com/imgextra/i2/O1CN01m97ARI1LuvSdmrEPU_!!6000000001360-0-tps-1404-320.jpg_1200x1200Q30s100.jpg',
        '//img.alicdn.com/imgextra/i1/O1CN01N8VTVc1z6ABqVlOlt_!!6000000006664-0-tps-1404-320.jpg_1200x1200Q30s100.jpg',
      ],
      arr:[
        {img:'//gw.alicdn.com/imgextra/i3/O1CN01nF5yEY1yzke4DNzJV_!!6000000006650-2-tps-120-120.png',text:'惊喜红包'},
        {img:'//gw.alicdn.com/imgextra/i2/O1CN010HbNVp1MznHjZiVRN_!!6000000001506-2-tps-120-120.png',text:'黑豹2'},
        {img:'//gw.alicdn.com/imgextra/i3/O1CN01Qkv1CV1dEwEY9tpTt_!!6000000003705-2-tps-120-120.png',text:'会员中心'},
        {img:'//gw.alicdn.com/imgextra/i3/O1CN01cmU7B01KMkHYrGBOU_!!6000000001150-2-tps-120-120.png',text:'电影快讯'}
      ],
      tv:[]
    };
  },
  components: { }
   
}
</script>

<style lang="scss" scoped>
.tpp{
    background-color: #f3f3f3;
}
.top{
    width: 7.5rem;
    height: .78rem;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding-right: .44rem;
    margin-bottom: .2rem;
    background-color: #fff;
}
.top-l{
    display: flex;
    padding: 0 .24rem;
    height: 36px;
    align-items: center;
    font-size: .3rem;
}
.top-l img{
    height: 21px;
    width: 21px;
}
.top-r{
    display: flex;
    height: 36px;
    align-items: center;
    font-size: .3rem;
    width: 3.24rem;
    justify-content: space-between;
    color: #111;
}
.lbt{
    width: 7.02rem;
    height: 1.4rem;
    border-radius: 16px;
    overflow: hidden;
    margin-left: .2rem;
    margin-bottom: .2rem;
}
.lbt img{
    width: 7.02rem;
    height: 1.4rem;
}
.list{
    width: 7.02rem;
    height: 90px;
    border-radius: 16px;
    margin-left: .2rem;
    background-color: #fff;
    box-sizing: border-box;
    padding: 12px;
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin-bottom: .2rem;
}
.list img{
    width: .9rem;
    height: .9rem;
}
.xq{
    width: 7.02rem;
    height: 2.62rem;
    margin-bottom: .2rem;
    padding: 12px;
    box-sizing: border-box;
    background-color: #fff;
    margin-left: .2rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
}
.xq img{
    width: 1.52rem;
    height: 105px;
    border-radius: 5px;
}
.last{
    color: #fff;
    background-color: #fb5773;
    width: 1.08rem;
    height: 27px;
    text-align: center;
    line-height: 27px;
    border-radius: 10px;
}
.zhong{
    width: 3.46rem;
    height: 107px;
    padding: 0 .24rem;
}
.yanyuan{
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 3.46rem;
    overflow: auto;
}
.name{
    font-size: 16px;
    margin-bottom: 10px;
}
.xq span{
    color: #ff901c;
}
</style>